<!DOCTYPE html>
<html lang="en">
<head>
    <script src="http://unpkg.com/vue@3/dist/vue.global.js"></script>
    <title>红岩文化</title>
</head>
<style>
     *{
	margin: 0;
	padding: 0;
}
    body{
        width: 100%;
        margin: auto;
    }
    body>div{
        margin: 0 auto;
    }
    .header{
        background: url(https://www.hongyan.info/Public/style/lihong/images/public/header-bg.png) repeat-x;
    }
    .header-content{
        height: 140px;
        width: 1200px;
        margin: auto;
    }
    .logo{
        float: left;
        margin-top: 20px;
    }
    a{
        text-decoration: none;
    }
    .box1{
        color: #ec1b23;
        font-size: 14px;
        margin: 0 8px;
    }
    .header-right{
        float: right;
        text-align: right;
        color: #ec1b23;
        margin-top: 20px;
    }
    .header-right>p{
        margin: 8px 0;
    }
    .search-content{
        width: 120px;
        height: 25px;
        border: 1px solid #d0d0d0;
    }
    .search{
        width: 50px;
        height: 29px;
        background-color: #9d3328;
        line-height: 27px;
        color: #fff;
        border: none;
    }
    #app{
        width: 1535px;
        height: 100px;
        background-color: #ec1b23; 
        margin: auto;
        text-align: center;
        background:url(https://www.hongyan.info/Public/style/lihong/images/public/nav-bg.png) ;
    }
    .nav{
        width: 1230px;
        height: 100px;
        display: flex;
        text-align: center;
    }
    .box2{
        display: block;
        color: #fff;
        width: 130px;
        height: 80px;
        line-height: 30px;
        border: 1px solid #fff;
        border-width: 1px 1px 0 0; 
        background: #ec1b23;
        font-size: 20px;
        font-weight: bold;
        padding-top: 20px;
    }
    .eng{
        font-size: 12px;
        font-weight: normal;
        margin-top: -5px;
    }
    li{
        list-style: none;
    }
    #app>li{
        list-style-type: none;
        float: left;
        text-align: center;
        position: relative;
    }
    #app>ul>li>a:hover{
        color: #fff;
        background: url(https://www.hongyan.info/Public/style/lihong/images/public/nav.png);
    }
    #app li ul{
        position: absolute;
        font-size: 12px;
    }
    #app li ul li{
        width: 130px;
        height: 30px;
        text-align: center;
    }
    #app li ul li>a{
        width: 130px;
        height: 30px; 
        text-align: center;
        line-height: 30px;
        background-color: #ec1b23;
        color: #fff;
        font-size: 14px;
        font-weight: normal;
        position:absolute;
        left: 0;
    }
    #app li ul li>a:hover{
        background-color: #9d3328;
    }
</style>
<body>
    <div class="header">
        <div class="header-content">
            <div class="logo">
                <img src="images\logo.png" alt="">
            </div>
            <div class="header-right">
                <img src="images\icon-18.png" alt="">
                <p>
                    <a href="" class="box1">设为首页</a>|
                    <a href="" class="box1">加入收藏</a>|
                    <a href="" class="box1">热线：023-65312300（沙坪坝片区）023-63323457（渝中片区）</a>|
                    <a href="" class="box1">English</a>
                </p>
                <form action="">
                    <input type="text" placeholder="请输入搜索关键词" class="search-content">
                    <span><input type="submit" value="搜索" class="search"></span>
                </form>
            </div>
        </div>
    </div>
    <div id="app" v-clock>
        <ul class="nav">
            <li class="nav-content" v-for="menu in menu" @mouseover="menu.show=!menu.show" @mouseout="menu.show=!menu.show">
                <a href="menu.url"  class="box2">
                    {{menu.name}}  
                    <p class="eng">{{menu.eng}}</p>
            </a>
            <ul v-show="menu.show">
                <li v-for="submenu in menu.submenu"><a href="submenu.url">{{submenu.name}}</a></li>
            </ul>
            </li>
        </ul>
    </div>
    <div id="jpg">
        <img src="images/63523852f3ffc.jpg" style="width: 100%;height: 100%;">
    </div>
    <script>
        const { createApp } = Vue
        createApp({
            data(){
                return{
                    con1:"设为首页",
                    con2:"加入收藏",
                    con3:"热线：023-65312300（沙坪坝片区）023-63323457（渝中片区）",
                    con4:"English",
                    menu:[
                        {name:'首页',eng:"Home",url:"#",show:false},
                        {name:'关于红岩',eng:"HongYan",url:"#",show:false,submenu:[
                            {name:'红岩文化',url:'#'},
                            {name:'博物馆机构',url:'#'},
                            {name:'历史沿革',url:'#'},
                        ]},
                        {name:'公告动态',eng:"Dynamics",url:"#",show:false,submenu:[
                            {name:'文博信息',url:'#'},
                            {name:'政务平台',url:'#'},
                            {name:'公告',url:'#'},
                            {name:'专题报告',url:'#'},
                        ]},
                        {name:'馆藏精品',eng:"Collections",url:"#",show:false,submenu:[
                            {name:'一级文物',url:'#'},
                            {name:'二级文物',url:'#'},
                            {name:'三级文物',url:'#'},
                        ]},
                        {name:'陈列展览',eng:"Exhibition",url:"#",show:false,submenu:[
                            {name:'虚拟展览',url:'#'},
                            {name:'基本陈列',url:'#'},
                            {name:'复原陈列',url:'#'},
                            {name:'临时展览',url:'#'},
                            {name:'展览交流',url:'#'},
                        ]},
                        {name:'研究开发',eng:"Research",url:"#",show:false,submenu:[
                            {name:'历史研究',url:'#'},
                            {name:'艺术创作',url:'#'},
                            {name:'影音在线',url:'#'},
                            {name:'文创产品',url:'#'},
                        ]},
                        {name:'公共教育',eng:"Education",url:"#",show:false,submenu:[
                            {name:'党性教育',url:'#'},
                            {name:'爱国主义教育',url:'#'},
                            {name:'研学实践教育',url:'#'},
                            {name:'科普教育',url:'#'},
                        ]},
                        {name:'参观服务',eng:"Service",url:"#",show:false,submenu:[
                            {name:'景点介绍',url:'#'},
                            {name:'服务内容',url:'#'},
                            {name:'网上预约',url:'#'},
                            {name:'志愿服务',url:'#'},
                        ]},
                        {name:'网上预约',eng:"Reservation",url:"#",show:false,
                        },
                    ]
                }
            }
        }).mount('#app')
    </script>
</body>
</html>